import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import { Menu } from "antd";
import {connect} from "react-redux"
import "./index.less";
import logo from "@/assets/images/study.png";
import menuList from "@/config/menuConfig";
import {setHeadTitle} from "@/redux/actions"

/**
 * 左侧导航组件
 */

function filterMenu(menu, paths, user) {
  /**
   * 使用递归完成菜单的角色管理
   * 1. 如果当前用户是admin
     2. 如果当前item是公开的
     3. 当前用户有此item的权限: key有没有menus中
   */
  return menu.reduce((pre, item) => {
    const isPathIncluded = paths.includes(item.key); //用户的菜单的路径是否在菜单的信息中包含
    const isPublic = item.isPublic === true; //鉴别信息是否为公开的
    const isAdmin = user === "admin"; // 检查用户是否为admin
    const newItem = { ...item };

    if (item.children) {
      const filteredChildren = filterMenu(item.children, paths, user);
      if (filteredChildren.length > 0) {
        newItem.children = filteredChildren;
      } else {
        delete newItem.children; //如果子集不在里面进行删除
      }
    }
    if (isPathIncluded ||isPublic ||(newItem.children && newItem.children.length > 0) ||isAdmin) {
          pre.push(newItem);
        }
      return pre;
    }, []);
}

function findLabelByKey(menuList, keyToFind) {
  for (const item of menuList) {
      if (item.key === keyToFind) {
          return item.label;
      }
      if (item.children) {
          const foundLabel = findLabelByKey(item.children, keyToFind);
          if (foundLabel) return foundLabel;
      }
  }
  return null;
}
class LeftNav extends Component {
  constructor(props) {
    super(props);
    this.markMenu();
    const menus = this.props.user.role.menus;
    const username = this.props.user.username;
    this.userMenus = filterMenu(menuList, menus, username);
  }

  markMenu = () => {
    const path = this.props.location.pathname;
    menuList.forEach((item) => {
      //查找一个与当前请求路径匹配的子路由item
      if (item.children) {
        const cItem = item.children.find(
          (cItem) => path.indexOf(cItem.key) === 0
        );
        if (cItem) {
          this.openKey = item.key;
        }
      }
    });
  };

  handlerMenu = (item) => {
    this.props.history.push(item.key);
    //调用redux的action更新标题
    const title=findLabelByKey(this.userMenus,item.key);
    
    this.props.setHeadTitle(title);
  };

  render() {
    //获取当前请求的路由路径
    let path = this.props.location.pathname;
    if (path.indexOf("/product") === 0) {
      //当前请求的是商品或及其子路由界面
      path = "/product";
    }
    return (
      <div className="left-nav">
        <Link to="/" className="left-nav-header">
          <img src={logo} alt="logo" />
          <h1>管理后台</h1>
        </Link>
        <Menu
          selectedKeys={[path]}
          defaultOpenKeys={[this.openKey]}
          mode="inline"
          theme="dark"
          items={this.userMenus}
          style={{ marginTop: "20px" }}
          onClick={this.handlerMenu}
        />
      </div>
    );
  }
} 

/**
 * withRouter高阶组件
 *  包装非路由组件返回一个新的组件
 *    新的组件向非路由组件传递三个属性  history,location,match
 */
export default connect(
  state=>({user:state.user}),
  {setHeadTitle}
)(withRouter(LeftNav))
